<script setup lang="ts">
import { ref } from 'vue';

defineOptions({ name: 'SystemInfo' });

// 模拟硬件信息
const hardwareInfo = ref({
  cpu: '海光7285 CPU',
  gpu: '昆仑芯XPU 2 GPU',
  memory: '128GB',
  cpuUsage: 65,
  gpuUsage: 78,
  memoryUsage: 62
});

// 模拟最近异常事件
const recentEvents = ref([
  {
    id: 1,
    time: '10:23:45',
    type: 'GPU驱动错误',
    level: 'critical',
    description: 'GPU驱动程序版本不匹配，已自动重启'
  },
  {
    id: 2,
    time: '09:45:12',
    type: '内存使用率过高',
    level: 'warning',
    description: '系统内存使用率达到85%，已释放部分缓存'
  },
  {
    id: 3,
    time: '08:30:22',
    type: '模型加载失败',
    level: 'error',
    description: '模型ResNet50加载失败，原因：文件损坏'
  },
  {
    id: 4,
    time: '07:15:36',
    type: '磁盘空间不足',
    level: 'warning',
    description: '系统磁盘空间剩余15%，建议清理'
  }
]);
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-semibold flex items-center">
        <SvgIcon icon="mdi-server" class="mr-2 text-primary" />
        系统信息
      </h3>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 硬件信息 -->
      <div class="bg-gray-50 p-6 rounded-lg">
        <h4 class="font-medium text-lg mb-4">硬件信息</h4>
        <div class="space-y-4">
          <div>
            <div class="flex items-center justify-between mb-1">
              <span class="text-gray-600">{{ hardwareInfo.cpu }}</span>
              <span class="text-gray-500">{{ hardwareInfo.cpuUsage }}%</span>
            </div>
            <NProgress :percentage="hardwareInfo.cpuUsage" status="warning" />
          </div>

          <div>
            <div class="flex items-center justify-between mb-1">
              <span class="text-gray-600">{{ hardwareInfo.gpu }}</span>
              <span class="text-gray-500">{{ hardwareInfo.gpuUsage }}%</span>
            </div>
            <NProgress :percentage="hardwareInfo.gpuUsage" status="warning" />
          </div>

          <div>
            <div class="flex items-center justify-between mb-1">
              <span class="text-gray-600">{{ hardwareInfo.memory }} 内存</span>
              <span class="text-gray-500">{{ hardwareInfo.memoryUsage }}%</span>
            </div>
            <NProgress :percentage="hardwareInfo.memoryUsage" status="normal" />
          </div>
        </div>
      </div>

      <!-- 最近异常事件 -->
      <div class="bg-gray-50 p-6 rounded-lg">
        <h4 class="font-medium text-lg mb-4 flex items-center">
          最近异常事件
          <NBadge type="danger" value="4" class="ml-2" />
        </h4>
        <div class="space-y-3 max-h-60 overflow-y-auto scrollbar-hide">
          <div v-for="event in recentEvents" :key="event.id" class="p-3 bg-white rounded-lg shadow-sm border-l-4" :class="{
            'border-critical': event.level === 'critical',
            'border-danger': event.level === 'error',
            'border-warning': event.level === 'warning'
          }">
            <div class="flex items-center justify-between">
              <span class="font-medium">{{ event.type }}</span>
              <span class="text-xs text-gray-500">{{ event.time }}</span>
            </div>
            <p class="text-sm text-gray-500 mt-1">{{ event.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </NCard>
</template>

<style scoped></style>